<!-- 页面说明 -->
<template>
  <main class="page-main">

    <a-form :model="formData" name="basic" autocomplete="off" :label-col="{ span:3 }" @finish="onFinish"
      @finishFailed="onFinishFailed">
      <a-form-item label='操作类型' name='type' :rules='rules.type'>
        <a-input v-model:value='formData.type' />
      </a-form-item>
      <a-form-item label='操作名称' name='name' :rules='rules.name'>
        <a-input v-model:value='formData.name' />
      </a-form-item>
      <a-form-item label='状态 success,failed' name='status' :rules='rules.status'>
        <a-input v-model:value='formData.status' />
      </a-form-item>
      <a-form-item label='IP地址' name='ip'>
        <a-input v-model:value='formData.ip' />
      </a-form-item>
      <a-form-item label='IP归属地' name='address'>
        <a-input v-model:value='formData.address' />
      </a-form-item>
      <a-form-item label='浏览器' name='browser'>
        <a-input v-model:value='formData.browser' />
      </a-form-item>
      <a-form-item label='操作系统' name='os'>
        <a-input v-model:value='formData.os' />
      </a-form-item>
      <a-form-item label='请求方法 GET/POST/DELETE/UPDATE' name='requestMethod'>
        <a-input v-model:value='formData.requestMethod' />
      </a-form-item>
      <a-form-item label='请求URL' name='requestUrl'>
        <a-input v-model:value='formData.requestUrl' />
      </a-form-item>
      <a-form-item label='请求参数' name='requestParam'>
        <a-input v-model:value='formData.requestParam' />
      </a-form-item>
      <a-form-item label='请求体' name='requestBody'>
        <a-input v-model:value='formData.requestBody' />
      </a-form-item>
      <a-form-item label='应答参数' name='responseParam'>
        <a-input v-model:value='formData.responseParam' />
      </a-form-item>
      <a-row>
        <a-col :offset="18" :span="3">
          <a-button type="primary" html-type="submit">提交</a-button>
        </a-col>
        <a-col>
          <a-button @click="handleClose">取消</a-button>
        </a-col>
      </a-row>
    </a-form>
  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/OperationLogApi";
import { notification } from "ant-design-vue";

export default {
  props: {
    dataId: { type: Number },
  },
  components: {},
  data() {
    return {
      formData: {
        name: "",
        description: "",
      },
      rules: {
        type: [{ required: true, message: "操作类型必填!" }],
        name: [{ required: true, message: "操作名称必填!" }],
        status: [{ required: true, message: "状态 success,failed必填!" }],
      },
    };
  },
  methods: {
    onFinish(values: any) {
      console.log("Success:", values, this.$props.dataId);
      this.handleSave();
    },
    onFinishFailed(errorInfo: any) {
      console.log("Failed:", errorInfo);
    },
    handleClose() {
      this.$emit("close");
    },
    handleSuccessed() {
      this.$emit("successed");
    },
    /**
     * 保存数据
     */
    handleSave() {
      api.save(this.formData).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          this.handleSuccessed();
          this.handleClose();
          //请求失败
          notification.success({
            message: this.actionType + "成功",
            description: this.actionType + "成功",
          });
        } else {
          this.handleClose();
          //请求失败
          notification.error({
            message: "提交失败",
            description: res.message,
          });
        }
      });
    },
    handleGetDetail() {
      if (!this.$props.dataId) {
        return;
      }
      api.getById(this.$props.dataId).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          this.formData = res.data;
        }
      });
    },
  },
  computed: {
    actionType() {
      return this.$props.dataId ? "修改" : "添加";
    },
  },
  watch: {
    dataId(newValue) {
      console.log("dataId:", newValue);
      if (newValue) {
        this.handleGetDetail();
      } else {
        this.formData = {};
      }
    },
  },
  mounted() {
    if (this.$props.dataId) {
      this.handleGetDetail();
    } else {
      this.formData = {};
    }
  },
};
</script>
<style scoped>
</style>